<!--
+----------------------------------------------------------------------
| 友得云客  - 开启房产营销新纪元
+----------------------------------------------------------------------
| Copyright (c) 2019~2023 优得（西安）信息科技有限公司版权所有
+----------------------------------------------------------------------
| Licensed 友得云客不是自由软件 未经允许不可移除相关版权
+----------------------------------------------------------------------
| Author: www.youdeyunke.com
+----------------------------------------------------------------------
-->
<template>
    <el-dialog :visible.sync="show" width="900px" :destroy-on-close="true" title="客户优惠券管理">
        <el-table size="mini" :data="items" v-loading="loading">
            <el-table-column label="#ID" prop="id" width="40"></el-table-column>
            <el-table-column label="名称" prop="name"></el-table-column>
            <el-table-column label="说明" prop="desc"></el-table-column>
            <el-table-column label="面额" prop="amount" width="100"></el-table-column>
            <el-table-column label="核销状态">
                <template slot-scope="scope">
                    <el-tag v-if="scope.row.used == true" size="mini" type="success" plain>未使用</el-tag>
                    <el-tag v-else size="mini" type="info" plain>已使用</el-tag>
                </template>
            </el-table-column>
            <el-table-column label="领取时间" width="140">
                <template slot-scope="scope">
                    {{ scope.row.created_at | utcFormater }}
                </template>
            </el-table-column>
            <el-table-column label="过期时间" width="140">
                <template slot-scope="scope">
                    {{ scope.row.expired_at | utcFormater }}
                </template>
            </el-table-column>
            <el-table-column label="操作" width="80">
                <template slot-scope="scope">
                    <el-button size="mini" @click="useHandle(scope.row.id)" type="text">核销</el-button>
                </template>
            </el-table-column>
        </el-table>
    </el-dialog>
</template>

<script>
import { getUserCouponList, updateUserCouponUsed } from "@/api/coupon";
export default {
    name: "UserCoupons",
    data () {
        return {
            items: [],
            show: false,
            userId: null,
            loading: false,
        };
    },
    props: {},

    mounted: function () { },

    computed: {},

    methods: {
        closeDialog: function () {
            this.items = [];
            this.show = false;
            this.loading = false;
        },

        openDialog: function (userId) {
            this.userId = userId;
            this.show = true;
            this.loadData();
        },

        useHandle: function (couponId) {
            this.loading = true;
            updateUserCouponUsed(couponId).then((res) => {
                this.loading = false;
                if (res.status != 0) {
                    return;
                }
                this.loadData();
                this.$message.success("已使用");
                this.$emit("change", "");
            });
        },

        loadData: function () {
            this.loading = true;
            var query = { user_id: this.userId };
            getUserCouponList(query).then((res) => {
                this.loading = false;
                if (res.status != 0) {
                    return;
                }
                this.items = res.data.map((c) => {
                    c.hexiao = c.used === true ? "已使用" : "未使用";
                    return c;
                });
            });
        },
    },
};
</script>

<style scoped></style>
